<template>
  <view class="albumSet">
    <custom-navi :show-home="false">
      相册管理
      <view class="addPhoto" slot="right" @tap="handleAdd">新增相片</view>
    </custom-navi>
    <tab :tab="tab" @tabChange="handleTabChange" :tabIndex="tabIndex"></tab>
    <scroll-view scroll-y style="height:85vh">
      <view class="albumSet-imgBox">
        <view
          class="box"
          @tap="handlerImg(item)"
          v-for="(item,index) in imgList"
          :key="index"
          v-if=" item.albumType=== tabIndex"
        >
          <image :src="item.url" mode />
          <view class="box-title">{{item.title}}</view>
        </view>
      </view>
      <view class="img-null" v-if="imgList.length===0">暂无图片</view>
      <!-- <image-cropper :src="cj" @confirm="confirm" @cancel="cancel"></image-cropper> -->
      <!-- <view class="white-black"></view> -->
    </scroll-view>
    <!-- <view class="btn">
      <button @tap="handleSave">发布图片</button>
    </view>-->
  </view>
</template>

<script>
import CONSTS from '@/src/consts';
import ImageCropper from "../../components/invinbg-image-cropper/invinbg-image-cropper.vue";
import { findStoreAlbumList, submitStoreDetail, submitStoreMoreAlbumUrls, deleteQictures } from '../../api'
import tab from '@/src/pages/components/tab'
export default {
  data () {
    return {
      tabIndex: 0,
      params: {},
      imgIdx: 0,
      cj: '',
      shopInfo: {},
      imgList: [

      ],
      tab: [
        { tit: '首页轮播图' },
        // { tit: '商品' },
        { tit: '环境' },
        { tit: '其他' }
      ]
    }
  },
  onLoad (option) {

    const _self = this
    uni.getStorage({
      key: 'shopInfo',
      success: function (res) {
        _self.shopInfo = res.data
      }
    });

  },
  onShow () {
    this.load()
  },
  components: {
    tab,
    ImageCropper
  },
  methods: {
    handleTabChange (idx) {
      this.tabIndex = idx
    },
    handleAdd () {
		uni.removeStorage({
		    key: 'albumList',
		    success: function (res) {
		        console.log('success');
		    }
		});
      this.$utils.common.navigateTo('src/pages/my/pages/albumSet/pages/upload/index')
    },
    handleChangeType (idx) {
      this.type = idx;
      this.tab = this.typeTab[idx]
      this.tabIndex = 0
      this.upRefresh()
    },
    confirm (e) {
      this.cj = ''
      const _self = this
      uni.uploadFile({
        url: CONSTS.BASE_URL + '/basic/upload/single/store',
        filePath: e.detail.tempFilePath,
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: (uploadFileRes) => {
          const res = JSON.parse(uploadFileRes.data)
          _self.imgList[_self.imgIdx].url = CONSTS.BASE_URL + 'basic' + res.data

          _self.imgList[_self.imgIdx].path = res.data
        }
      });
    },
    cancel () {
      console.log('canceled')
    },
    async load () {
      const params = {
        storeId: this.shopInfo.id
      }
      try {
        const { data } = await findStoreAlbumList(params)
        this.loadImg(data)
        // console.log(data)
      } catch (err) {
        if (err.code) {
          if (err.code !== 200) {
            return this.$utils.common.toast.fail(err.data.message);
          }
          return this.$utils.common.toast.fail(err.errMsg);
        }
      }
    },
    loadImg (imgList) {
      this.imgList = []
      imgList.forEach((item, index) => {
        console.log(imgList[index].albumType)

        item.url = CONSTS.BASE_URL + '/basic' + imgList[index].albumUrl

      })
      this.imgList = imgList
	  console.log(this.imgList)
    },
    // handleDelete (index) {
    //   this.imgList[index].url = ''

    // },
    handlerImg (item) {
      const params = [item]

      uni.setStorageSync('albumList', params);
      this.$utils.common.navigateTo('src/pages/my/pages/albumSet/pages/imgSet/index', { id: 0, type: 'index' })
    },
    handleImgArr () {
      let arr = []

      for (const item of this.imgList) {
        if (item.path) {
          arr.push(item.path)
        }
      }
      //  arr = arr.slice(0, arr.length - 1)
      console.log(arr)
      return arr
    },
    async handleSave () {

      const params = {
        storeId: this.shopInfo.id,
        albumUrl: this.handleImgArr()
      }
      const paramsUrl = `storeId=${params.storeId}&albumUrls=${params.albumUrl}`
      console.log(paramsUrl)
      try {
        const { data } = await submitStoreMoreAlbumUrls(paramsUrl)
        return this.$utils.common.toast.fail("修改成功");

      } catch (err) {
        if (err.code) {
          if (err.code !== 200) {
            return this.$utils.common.toast.fail(err.data.message);
          }
          return this.$utils.common.toast.fail(err.errMsg);
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.img-null {
  margin-top: 120rpx;
  width: 100vw;
  text-align: center;
  height: 42rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 42rpx;
  color: rgba(80, 80, 80, 1);
  opacity: 1;
}
.addPhoto {
  color: #ffffff;
}
.btn {
  position: fixed;
  bottom: 116rpx;
  width: 100vw;
  display: flex;
  justify-content: center;
  button {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    width: 686rpx;
    height: 88rpx;
    background: rgba(12, 212, 211, 1);
    opacity: 1;
    border-radius: 10rpx;
  }
}
.albumSet {
  height: 100vh;
  background-color: #ffffff;
  &-imgBox {
    padding: 32rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .white-black {
    height: 100vw;
    background-color: #ffffff;
  }
  .box {
    position: relative;
    width: 332rpx;
    height: 332rpx;
    background: rgba(0, 0, 0, 0);
    opacity: 1;
    border-radius: 10rpx;
    margin-bottom: 16rpx;
    overflow: hidden;
    // background: rgba(241, 241, 241, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    &-title {
      position: absolute;
      bottom: 0rpx;
      width: 100%;
      padding: 24rpx;
      padding-bottom: 18rpx;
      color: #ffffff;
      text-overflow: ellipsis;
      overflow: hidden;
      background: linear-gradient(
        180deg,
        rgba(113, 113, 113, 0) 0%,
        rgba(0, 0, 0, 0.33) 33%,
        rgba(3, 3, 3, 1) 100%
      );
    }
  }
}
</style>